<template>
  <router-view></router-view>
  <div class="dl-box w-card" v-if="isShow">
    <div class="content-box">
      <el-tabs v-model="activeName" @tab-change="tabChange">
        <el-tab-pane label="卡券类订单" :name="1">
          <coupon-order v-if="activeName == 1" ref="couponOrderRef" />
        </el-tab-pane>
        <el-tab-pane label="直充类订单" :name="2">
          <direct-order v-if="activeName == 2" ref="directOrderRef" />
        </el-tab-pane>
        <!-- <el-tab-pane label="卡密类订单" :name="3">
          <pass-order v-if="activeName == 3" ref="passOrderRef" />
        </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { computed, reactive, ref, toRefs } from 'vue'
import couponOrder from './components/couponOrder.vue'
import directOrder from './components/directOrder.vue'
import passOrder from './components/passOrder.vue'
import { useRoute } from 'vue-router'
export default {
  components: {
    couponOrder,
    directOrder,
    passOrder,
  },
  setup() {
    const route = useRoute()
    const couponOrderRef = ref(null)
    const directOrderRef = ref(null)
    const passOrderRef = ref(null)

    const state = reactive({
      activeName: 1,
      isShow: computed(() => {
        let is = false
        if (route.matched[route.matched.length - 1].path == '/fxOrder') {
          is = true
        }
        return is
      })
    })

    function tabChange(e) {

    }

    return {
      ...toRefs(state),
      couponOrderRef,
      directOrderRef,
      passOrderRef,
      tabChange,
    }
  }
}
</script>

<style lang="scss" scoped>
.dl-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .content-box {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 20px;
  }
}
</style>